<template>
    <!--试卷-->
    <div class="paper" >
        <!--过滤器-->
        <div class="filter-container">
            <div class="filter-item item-input">
                <el-input v-model="stuIdInput" clearable placeholder="请输入学生学号"></el-input>
            </div>
            <div class="filter-item item-button">
                <el-button type="primary" @click="getStuListById(stuIdInput)"><i class="el-icon-search"></i> 查询学生</el-button>
            </div>
        </div>

        <div class="paper-list">
            <el-table
                    :data="stuDetail.data"
                    border
                    style="width: 100%"
                    empty-text="输入正确学号查询">
                <el-table-column
                        label="序号"
                        width="70"
                        align="center"
                        >
                    <template v-slot ="scope">
                        {{scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="班级号"
                        width="250"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="realName"
                        label="姓名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="班级"
                        width="300"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="updateTime"
                        label="班级更新年份"
                        width="240"
                        align="center">
                </el-table-column>
                <el-table-column label="操作" >
                    <template v-slot ="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="checkAllHWByStu(scope.row)">查看提交作业
                        </el-button>
                    </template>


                </el-table-column>
            </el-table>

            <myPagination :currentPage="hwCurPage" :pageSize="hwPageSize"
                        :total="hwTotal" :handleSizeChange="handleSizeChange"
                        :handleCurrentChange="handleCurrentChange"></myPagination>
        </div>

        <!--作业详情 对话框-->
        <el-dialog title="作业详情" v-model="homeworkDetail" top="6vh" width="70%">
            <div class="paper-list">
                <el-table
                        :data="homeworkDetails.data"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="作业号"
                            width="70"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="作业题目"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="submitTimes"
                            label="提交次数"
                            width="300"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="score"
                            label="得分"
                            width="120"
                            align="center">
                    </el-table-column>
                </el-table>
            </div>
            <!--分页-->
            <myPagination :currentPage="CurPage" :pageSize="PageSize"
                        :total="Total" :handleSizeChange="handleSizeChange1"
                        :handleCurrentChange="handleCurrentChange1"></myPagination>
            <template #footer>
                <el-button @click="homeworkDetail = false">关闭</el-button>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
import myPagination from "@/components/Pagination.vue"
import { onMounted, ref ,reactive} from "vue";
import API from "@/api/trainer/trainerClass"
import {componentSizeMap, ElMessage,} from 'element-plus'
    onMounted(()=>{
        if (localStorage.getItem("token") == null) {
                this.$router.push( { path: "/login" });
            }
    })        
components:{myPagination}
    const hwCurPage = ref(1)
    const hwPageSize= ref(20)
    const homeworkDetail =ref(false)
    const stuIdInput = ref('') // 学号搜索框的值
    const stuDetail = reactive({data:[]}) 
    const hwTotal = ref(0)
    const homeworkDetails = reactive({data:[]}) 

    function handleSizeChange(val) {
                hwPageSize.value = val;
                getStuListById(stuIdInput.value)
            }
    function handleCurrentChange(val) {
                hwCurPage.value = val;
                getStuListById(stuIdInput.value)
            }
    //根据学号查询学生列表
    const stuIdForHomework = ref('')
    function getStuListById(stuId){
        console.log(stuId)
        stuIdForHomework.value = stuId
        let getStudentClassParams = {
            pageNumber: hwCurPage.value, 
            pageSize: hwPageSize.value, 
            userId: stuId
        }
        stuIdInput.value = ''
        // 如果此时stuId为空或者为0，00，0000，则不请求数据
        if(stuId == '' || stuId == 0 || stuId == '0' || stuId == '00' || stuId == '0000'){
          ElMessage.success("请输入正确的学生学号或姓名")
        }else {
          API.getStudentClass(getStudentClassParams).then(res=>{
            if(res.data.success == true)
            {
              console.log(res.data)
              stuDetail.data = res.data.content.records
              // 如果date数据为空，则不显示表格
              if(stuDetail.data.length == 0){
                ElMessage.error("没有该学生，请输入正确的学号或姓名")
              }else {
                hwTotal.value = res.data.content.total
                for(let i = 0 ;i < stuDetail.data.length;i++){
                  stuDetail.data[i].updateTime = getThisDate(stuDetail.data[i].updateTime)
                }
                ElMessage.success("请求成功")
              }
            }
            else{
              ElMessage.error("请求失败，检查输入")
            }

          }).catch(e=>{
            console.log(e)
          })
        }
    }
    const CurPage = ref(1)
    const PageSize = ref(20)
    const Total = ref(0)
    const currclassId = ref(0)
    
    function handleSizeChange1(val){
        PageSize.value = val
        getclassSubmit(currclassId.value)
    }
    function handleCurrentChange1(val){
        CurPage.value = val
        getclassSubmit(currclassId.value)
    }
    function checkAllHWByStu(stclass){
        console.log(stclass.id)
        currclassId.value = stclass.id
        homeworkDetail.value = true
        getclassSubmit(currclassId.value)
    }
    //获取具体班级提交的记录
    function getclassSubmit(index){
        let getTrainClassRecordParams ={
            pageNumber: CurPage.value,
            pageSize: PageSize.value,
            trainClassId: index,
            userId : stuIdForHomework.value
        }
        API.getTrainClassRecord(getTrainClassRecordParams).then(res=>{
                    if(res.data.success == true)
                    {
                        console.log(res.data)
                        homeworkDetails.data = res.data.content.records
                        Total.value = res.data.content.total
                        for(let i = 0;i < homeworkDetails.data.length; i++){
                            if(homeworkDetails.data[i].submitTimes == null){
                                homeworkDetails.data[i].submitTimes = 0
0                            }
                            if(homeworkDetails.data[i].score == null){
                                homeworkDetails.data[i].score = 0
                            }
                        }
                        ElMessage.success("请求成功")
                    }
                    else{
                        ElMessage.error("请求失败，检查输入")
                    }
                    
                }).catch(e=>{
                    console.log(e)
                })
    }
//转时间格式
function getThisDate(originalDateTime){
    
    const date = new Date(originalDateTime);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');
    let formattedDateTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;

  return formattedDateTime
}
</script>

<style scoped>
    .paper {
        width: 100%;
    }

    .filter-container {
        padding-bottom: 10px;
    }

    .filter-item {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
    }

    .item-input {
        width: 200px;
        margin-right: 5px;
    }

    .paper-list {
        width: 100%;
    }

    .filter-bar {
        width: 100%;
        padding-bottom: 10px;
    }

    .filter-bar .el-select, .filter-bar .el-input {
        width: 20%;
        margin-right: 20px;
    }

    .filter-bar .el-progress {
        margin-left: 20px;
    }

    .filter-bar span {
        margin-left: 10px;
    }

    .question-table-expand {
        padding: 0 50px;
    }

    .paper-list .col2-cell-style {
        color: #409EFF;
        cursor: pointer;
    }

    .el-dialog .paper-container {
        margin: 0 20px;
    }

    .el-dialog .paper-container .paper-header h1 {
        text-align: center;
        font-size: 2.5em;
    }

    .el-dialog .paper-container .paper-info {
        text-align: center;
        padding: 20px;
    }

    .el-dialog .paper-container .paper-info h3 {
        display: inline-block;
        width: 25%;
    }

    .paper-container .paper-content {
        padding: 20px;
    }

</style>